<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 100px;
            height: 100px;
            background-color: red;


        }
        .c2{
            width: 100px;
            height: 100px;
            background-color: green;
            /*position: relative;  !* 相对定位,相对于自己自己原来的位置进行移动,原来的空间还占着 *!*/
            position: absolute; /* 绝对定位,不占用自己原来的位置,移动的时候如果父级标签以及祖先辈标签如果设置了相对定位,父级标签或者祖先标签进行移动 */
            /* 如果父级标签都没有设置相对定位,那么就按照整个文档进行移动 */
            top:20px;
            left: 50px;

            /*top:100px;*/
            /*left:50px;*/
            /*right:;*/
            /*bottom:;*/

        }
        .cc{
            position: relative;
            left:100px;
        }

        .c3{
            width: 100px;
            height: 100px;
            background-color: blue;

        }
        .cc2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }



    </style>

</head>
<body>
<div class="cc2"></div>

<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>

</div>
<div class="c3"></div>









</body>
</html>